import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Flex, WhiteSpace, List, Toast, InputItem, Button, Modal, PickerView } from '@ant-design/react-native';
import { GetAllBankCard } from '~/api/public';
import { saveOrderCashInfo } from '~/api/order';
import { connect } from 'react-redux';
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};
class Withdrawal extends Component {
    static navigationOptions = {
        title: '提现',
    };
    constructor(props) {
        super(props);
        this.state = {
            money: '20',
            Phone: this.props.userinfo.mobile,
            visible: false,
            label: '请选择银行卡',
            value: [],
            data: [],
            Balance: this.props.navigation.getParam('Balance'),
        };
        this.onChange = (value) => {
            let item = this.state.data.find(item => item.value == value[0])
            this.setState({
                label: item.label,
                value,
            });
        };
        this.onPress = () => {
            GetAllBankCard().then((r) => {
                console.log(r.data);
                if (r.code === 0) {
                    if (r.data.length === 0) {
                        this.props.navigation.push('AddBankCard',{with: 1})
                    } else {
                        let list = r.data.map(item => {
                            return {
                                label: item.BankName + "(" + item.CardNo.slice(item.CardNo.length - 4) + ")",
                                value: item.PuBankcardID,
                            };
                        });
                        this.setState({
                            data: list,
                        })
                        this.setState({ visible: true });
                        if (this.state.data.length > 0) {
                            this.setState({
                                value: this.state.data[0].value,
                                label: this.state.data[0].label,
                            });
                        }
                    }
                } else {
                    Toast.info('失败', 1);
                }
            });
        }
    }
    submit = () => {
        if (this.state.money === '') {
            Toast.info('请输入提现金额', 1);
        } else if (this.state.money < 20) {
            Toast.info('提现金额不能少于20', 1);
        } else if (this.state.money > this.state.Balance) {
            Toast.info('提现金额不能大于余额', 1);
        } else if (this.state.label === '' || this.state.label === '请选择银行卡') {
            Toast.info('请选择银行', 1);
        } else if (this.state.Phone === '') {
            Toast.info('请输入电话号码', 1);
        } else if (!/^1[3-9]\d{9}$/.test(this.state.Phone)) {
            Toast.info('请输入正确的电话号码', 1);
        } else {
            saveOrderCashInfo({
                PuBankcardID: this.state.value,
                AmountPlan: this.state.money,
                HolderMobile: this.state.Phone,
            }).then((r) => {
                if (r.code === 0) {
                    Toast.info('提现申请成功，等待平台审核', 3);
                } else {
                    Toast.info(r.msg, 1);
                }
            });
        }
    }
    onClose = () => {
        this.setState({
            visible: false,
        });
    };
    render() {
        const setMoney = (money) => {
            this.setState({
                money: money,
            });
        };
        const setPhone = (Phone) => {
            this.setState({
                Phone: Phone,
            });
        };
        return (
            <Flex direction='column'>
                <WhiteSpace size={'lg'} />
                <Flex direction='row'>
                    <List style={{ width: '100%' }}>
                        <InputItem style={{ paddingLeft: 20 }} placeholder='请输入提现金额' value={this.state.money} onChange={setMoney}>提现金额</InputItem>
                    </List>
                </Flex>
                <Flex direction='row' justify='between' style={{ backgroundColor: '#FFFFFF' }}>
                    <Flex style={{ width: '25%' }}>
                        <Text style={{ paddingLeft: 14, fontSize: 17 }}>收款银行</Text>
                    </Flex>
                    <Flex style={{ width: '75%' }}>
                        <Button style={{ width: '100%', alignItems: 'flex-start' }} onPress={() => this.onPress()}> {this.state.label}</Button>
                    </Flex>
                    <Modal popup visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                        <View
                            style={{
                                paddingVertical: 20,
                                paddingHorizontal: 20,
                            }}>
                            <PickerView cols={1} onChange={this.onChange} value={this.state.value} data={this.state.data} />
                        </View>
                        <Button type="primary" onPress={this.onClose}>
                            确定
                                </Button>
                    </Modal>
                </Flex>
                <Flex direction='row'>
                    <List style={{ width: '100%' }}>
                        <InputItem style={{ paddingLeft: 20 }} placeholder='请输入电话号码' type={'number'} maxLength={11} onChange={setPhone} value={this.state.Phone}>联系电话</InputItem>
                    </List>
                </Flex>
                <Flex style={{ width: '100%', marginTop: '100%' }} justify='around' align='center'>
                    <Flex style={{ backgroundColor: '#F2BC38', width: '45%', height: 44 }} justify='center' align='center' onPress={() => { this.props.navigation.push('Mywallet') }}>
                        <Text style={{ color: '#FFFFFF' }}>取消</Text>
                    </Flex>
                    <Flex style={{ backgroundColor: 'red', width: '45%', height: 44 }} justify='center' align='center' onPress={() => { this.submit() }}>
                        <Text style={{ color: '#FFFFFF' }}>提交</Text>
                    </Flex>
                </Flex>
            </Flex>
        )
    }
}
export default connect(mapGetter)(Withdrawal);